<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于 jQuery 实现表格的 CRUD</title>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
    <table id="tbl">
        <tbody>
            <tr>
                <th>
                    <input type="checkbox" id="all">
                    <label for="all">全选</label>
                </th>
                <th>商品编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>上货日期</th>
                <th>是否下架</th>
                <th>操作</th>
            </tr>
        </tbody>
    </table>

    <div id="containner">
        <form>
            商品编号：<input type="text" name="product_id" id="product_id"><p/>
            商品名称：<input type="text" name="product_name" id="product_name"><p/>
            商品价格：<input type="text" name="product_price" id="product_price"><p/>

            上货日期：
                <select id="year">
                </select>

                <select id="month">
                </select>

                <select id="day">
                </select>
                <p/>

            是否下架：
                <input type="radio" name="product_status" id="status1" checked>是
                <input type="radio" name="product_status" id="status2">否
                <p/>

            <input type="button" value="添加" id="btnAdd">
            <input type="button" value="修改" id="btnUpdate">
            <input type="button" value="批量删除" id="btnDels">
        </form>
    
        <!-- 父元素进行卡位，子元素进行定位 -->
        <div id="title">商品添加</div>
        <div id="tips">双击还原添加表单</div>
        
    </div>

    <script src="js/index.js"></script>
</body>
</html>